/* 个人中心页面头部样式 */
.header {
  background-color: #87ceeb; /* 背景颜色设置为浅蓝色 */
  padding: 15px; /* 内边距为15px */
  text-align: center; /* 文本居中对齐 */
  position: relative; /* 相对定位，用于定位子元素 */
}

/* 头部中的h1标签样式 */
.header h1 {
  color: white; /* 文字颜色为白色 */
  margin: 0; /* 外边距为0 */
  font-size: 34px; /* 字体大小为34px */
}

/* 导航链接样式 */
.nav-links {
  position: absolute; /* 绝对定位 */
  right: 20px; /* 距离容器右边20px */
  top: 50%; /* 距离容器顶部50% */
  transform: translateY(-50%); /* 向上移动50%，以垂直居中 */
}

/* 导航链接中的a标签样式 */
.nav-links a {
  color: #ff6b6b; /* 文字颜色为浅红色 */
  text-decoration: none; /* 去除下划线 */
  margin-left: 15px; /* 左边距为15px */
  font-size: 14px; /* 字体大小为14px */
}

/* 个人资料容器样式 */
.profile-container {
  width: 400px; /* 宽度为400px */
  margin: 50px auto; /* 上下外边距为50px，左右自动（居中） */
  padding: 30px; /* 内边距为30px */
  border: 2px solid #ffb6c1; /* 边框为2px实线，颜色为浅粉色 */
  border-radius: 8px; /* 边框圆角为8px */
}

/* 个人资料表单中的表单组样式 */
.profile-form .form-group {
  margin-bottom: 20px; /* 底部外边距为20px */
  display: flex; /* 使用弹性布局 */
  align-items: center; /* 子元素垂直居中 */
}

/* 个人资料表单中的标签样式 */
.profile-form label {
  width: 70px; /* 宽度为70px */
  text-align: left; /* 文本左对齐 */
  margin-right: 10px; /* 右边距为10px */
}

/* 个人资料表单中的输入框和选择框样式 */
.profile-form input,
.profile-form select {
  flex: 1; /* 弹性比例为1 */
  padding: 8px; /* 内边距为8px */
  border: 1px solid #ddd; /* 边框为1px实线，颜色为浅灰色 */
  border-radius: 4px; /* 边框圆角为4px */
}

/* 个人资料表单中的禁用输入框样式 */
.profile-form input:disabled {
  background-color: #f5f5f5; /* 背景颜色为浅灰色 */
  cursor: not-allowed; /* 鼠标悬停时显示不允许操作的指针 */
}

/* 个人资料表单中的提交按钮样式 */
.profile-form .submit-btn {
  width: 100%; /* 宽度为100% */
  padding: 10px; /* 内边距为10px */
  background-color: #e0e0e0; /* 背景颜色为浅灰色 */
  border: none; /* 无边框 */
  border-radius: 4px; /* 边框圆角为4px */
  color: #333; /* 文字颜色为深灰色 */
  font-size: 16px; /* 字体大小为16px */
  cursor: pointer; /* 鼠标悬停时显示指针 */
}

/* 个人资料表单中的提交按钮悬停样式 */
.profile-form .submit-btn:hover {
  background-color: #d3d3d3; /* 鼠标悬停时背景颜色为更深的灰色 */
}